<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml">
	<ui:define name="head">
		<style>
a:visited, a:hover {
	color: red;
}

iframe {
	height: 600px;
}

.box-footer {
	border-top: none;
}

.ui-widget-header .ui-inputfield, .ui-widget-content .ui-inputfield {
	width: 120px;
}
</style>
	</ui:define>
	<ui:define name="content">
		<div class="row">
			<div class="col-md-3 full-content" style="padding-right: 10px;">
				<div class="box box-success">
					<div class="box-header with-border">
						<h3 class="box-title">故障列表</h3>
					</div>
					<div class="box-body full-content-scroll with-border">
						<h:form id="form">
							<p:toolbar>
								<f:facet name="left">
									<p:calendar id="datetime" navigator="true"
										pattern="yyyy-MM-dd"   placeholder="起始日期"
										value="#{breakerWaveletController.startDate}"
										styleClass="calendar-width" />
									<p:outputLabel for="popup4" value="至 "
										style="margin-right:5px;margin-left:5px;" />
									<p:calendar id="popup4" navigator="true" pattern="yyyy-MM-dd"
										styleClass="calendar-width" placeholder="终止日期"
										value="#{breakerWaveletController.endDate}">
									</p:calendar>
									<p:commandButton  id="query2" icon="ui-icon-search" oncomplete="initWaveView()"
										actionListener="#{breakerWaveletController.selectByDate}" alt="搜索"
										update="form :form3:selectActionDTO :form3:iframe" style="margin-left:5px;">
									</p:commandButton>
								</f:facet>
							</p:toolbar>
							<p:tree value="#{breakerWaveletController.treeNodeResource}"
								style="width:400px;border:none" selectionMode="single"
								var="node" dynamic="true" id="tree" widgetVar="tree"
								animate="true">
								<p:ajax event="expand" update="tree"
									listener="#{breakerWaveletController.onNodeExpand}" />
								<p:ajax event="select" process="@this"
									update=":form3:selectActionDTO :form3:iframe"
									listener="#{breakerWaveletController.onNodeSelect}"
									oncomplete="initWaveView()" />
								<p:treeNode type="FaultRecord" icon="fa fa-home">
									<h:outputText value="#{node.faultTime}">
										<f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss"></f:convertDateTime>
									</h:outputText>
									<h:outputText value=" #{node.equipment} " />
									<h:outputText value="#{node.faultPhase}"
										rendered="#{!node.faultType.contains('接地')}" />
									<h:outputText value="#{node.faultPhase}N"
										rendered="#{node.faultType.contains('接地')}" />
									<h:outputText value="#{node.faultReson}" />
								</p:treeNode>
								<p:treeNode type="BreakerActionInfoDTO">
									<h:outputText value=" #{node.stationName} " />
									<h:outputText value=" #{node.breakerName} " />
									<h:outputText value=" #{node.phase}" />
								</p:treeNode>
							</p:tree>
						</h:form>
					</div>
					<div class="box-footer"></div>
				</div>
			</div>
			<div class="col-sm-9 full-content" style="padding-left: 10px;">
				<div class="box box-success">
					<div class="box-header with-border">
						<h3 class="box-title" id="sel"></h3>
					</div>
					<div class="box-body full-content-scroll">
						<h:form id="form3">
							<h:inputHidden id="selectActionDTO"
								value="#{breakerWaveletController.genString()}"></h:inputHidden>
							<p:outputPanel id="iframe">
								<iframe src="" id="wavePage" frameborder="0" scrolling="no"
									width='100%'></iframe>
							</p:outputPanel>
						</h:form>
					</div>
					<div class="box-footer"></div>
				</div>
			</div>
		</div>

	</ui:define>
	<ui:define name="contentend">
		<!-- <script src="breakerWaveMain.js"></script> -->
		<script>
			function initWaveView() {
				var selectActionStr = document
						.getElementById("form3:selectActionDTO").value;
				if (selectActionStr != "") {
					var selectActionDTO = JSON.parse(document
							.getElementById("form3:selectActionDTO").value);
					var link = "breakerWave.xhtml?fileId="
							+ selectActionDTO.fileId + "&amp;breakerId="
							+ selectActionDTO.breakerId + "&amp;phase="
							+ selectActionDTO.phase + "&amp;actTime="
							+ selectActionDTO.actTime + "&amp;removeTime="
							+ selectActionDTO.removeTime+ "&amp;xhTime="
							+ selectActionDTO.xhTime;
					var name = selectActionDTO.lineName
							+ selectActionDTO.breakerName + "跳"
							+ selectActionDTO.phase + "("
							+ selectActionDTO.faultTime + ")";
					getProtectActTime(link, name, selectActionDTO.fileId,
							selectActionDTO.phase);
				} else {
					$('#sel').html("");
				}
			}
			function getProtectActTime(link, name, fileId, phase) {
				$('#sel').html(name);
				//点击左侧列表，根据fileId和phase，获取最早的保护动作时间
				$.getJSON('/rest/waveData/getMinProtectActTime/' + fileId + "/"
						+ phase, function(result) {
					link = link + "&amp;protectAct=" + result;
					console.log(link);
					$('#wavePage').attr('src', link);
				})
			}
		</script>
	</ui:define>
</ui:composition>
